<worklenz-rpt-header [title]="pageTitle" [showDuration]="false" (exportFile)="export()"></worklenz-rpt-header>

<nz-content>
  <nz-card [nzLoading]="loading" [nzTitle]="projectsTitle" [nzExtra]="projectsActions">

    <ng-template #projectsTitle>
      <nz-space>
        <button *nzSpaceItem [nzDropdownMenu]="statusDropDown" [nzClickHide]="false" [nzLoading]="loadingStatuses"
                [nzTrigger]="'click'" nz-button nz-dropdown>
          状态
          <span nz-icon nzType="caret-down"></span>
        </button>
        <button *nzSpaceItem [nzDropdownMenu]="healthDropDown" [nzClickHide]="false" [nzLoading]="loadingHealths"
                [nzTrigger]="'click'" nz-button nz-dropdown>
          健康
          <span nz-icon nzType="caret-down"></span>
        </button>
        <button *nzSpaceItem [nzDropdownMenu]="categoryDropDown" [nzClickHide]="false" [nzLoading]="loadingCategories"
                [nzTrigger]="'click'" nz-button nz-dropdown>
          类别
          <span nz-icon nzType="caret-down"></span>
        </button>
        <button *nzSpaceItem [nzDropdownMenu]="projectManagerDropDown" [nzClickHide]="false" [nzLoading]="loadingProjectManagers"
                [nzTrigger]="'click'" nz-button nz-dropdown>
          项目经理
          <span nz-icon nzType="caret-down"></span>
        </button>
      </nz-space>
    </ng-template>

    <ng-template #projectsActions>
      <button
        nz-button
        [nzType]="'default'"
        [nzTrigger]="'click'"
        [nzLoading]="loading"
        nz-dropdown
        [nzClickHide]="false"
        [nzDropdownMenu]="columnsDropdown"
        class="columns-toggle me-2"
      >
        <span nz-icon [nzType]="'more'" [nzTheme]="'outline'"></span> 显示字段
      </button>

      <nz-dropdown-menu #columnsDropdown="nzDropdownMenu">
        <ul nz-menu nzSelectable class="menu">
          <li
            *ngFor="let item of columns"
            nz-menu-item
            nz-checkbox
            [nzChecked]="item.pinned"
            (nzCheckedChange)="onColumnsToggle($event, item)"
            class="m-0"
          >{{item.label}}</li>
        </ul>
      </nz-dropdown-menu>
      <nz-input-group style="width: 250px" [nzSuffix]="suffixIconSearch">
        <input type="text" nz-input placeholder="按名称搜索" [(ngModel)]="searchText"
               (ngModelChange)="searchProjects()"/>
      </nz-input-group>
    </ng-template>
    <ng-template #suffixIconSearch>
      <span nz-icon nzType="search"></span>
    </ng-template>

    <nz-table #table
              [nzData]="projects"
              [nzFrontPagination]="false"
              [nzLoading]="loading"
              [nzPageIndex]="pageIndex"
              [nzPageSizeOptions]="paginationSizes"
              [nzPageSize]="pageSize"
              [nzTotal]="total ? total : 0"
              [nzShowSizeChanger]="true"
              [nzHideOnSinglePage]="true"
              [nzScroll]="{ x: '300px' }"
              (nzQueryParams)="onQueryParamsChange($event)">
      <thead>
      <tr>
        <th nzLeft [nzWidth]="'300px'" style="z-index: 9" [nzSortFn]="true" [nzColumnKey]="'name'" scope="col">
          项目
        </th>
        <th [nzWidth]="'230px'" scope="col" *ngIf="estimatedActive">预计与实际</th>
        <th [nzWidth]="'200px'" scope="col" *ngIf="progressActive">任务进度</th>
        <th [nzWidth]="'250px'" scope="col" *ngIf="lastActivityActive">最后活动</th>
        <th [nzWidth]="'150px'" [nzSortFn]="true" [nzColumnKey]="'status_id'" scope="col" *ngIf="statusActive">状态
        </th>
        <th [nzWidth]="'275px'" scope="col" *ngIf="startEndDateActive">开始/结束日期</th>
        <th [nzWidth]="'170px'" scope="col" *ngIf="daysLeftActive">剩余天数/逾期</th>
        <th [nzWidth]="'170px'" [nzSortFn]="true" [nzColumnKey]="'project_health'" scope="col" *ngIf="healthActive">
          项目健康
        </th>
        <th [nzWidth]="'150px'" scope="col" *ngIf="categoryActive">类别</th>
        <th [nzWidth]="'250px'" scope="col" *ngIf="updateActive">项目更新</th>
        <th [nzWidth]="'160px'" [nzSortFn]="true" [nzColumnKey]="'client'" scope="col" *ngIf="clientActive">客户</th>
        <th [nzWidth]="'150px'" [nzSortFn]="true" [nzColumnKey]="'team_name'" scope="col" *ngIf="teamActive">团队</th>
        <th [nzWidth]="'220px'" scope="col">项目经理</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of table.data trackBy: trackBy" class="cursor-pointer">

        <!-- Project -->
        <td nzLeft (click)="openProject(data)" style="z-index: 9">
          <div class="position-relative w-100">
            <nz-space>
              <nz-badge *nzSpaceItem [nzColor]="data.color_code"></nz-badge>
              <span *nzSpaceItem class="ellipsis" style="max-width: 260px" nz-tooltip
                    [nzTooltipTitle]="data.name">{{data.name}}</span>
            </nz-space>
            <button nz-button nzType="default" class="open-btn">
              打开
              <span nz-icon nzType="arrows-alt" nzTheme="outline"></span>
            </button>
          </div>
        </td>


        <!-- estimated vs actual-->
        <td *ngIf="estimatedActive">
          <worklenz-estimated-vs-actual-chart-common *ngIf="data.actual_time && data.estimated_time"
                                                     [id]="data.id"
                                                     [actualTime]="data.actual_time || 0"
                                                     [estimatedTime]="data.estimated_time * 60 || 0"
                                                     [actualTimeString]="data.actual_time_string || null"
                                                     [estimatedTimeString]="data.estimated_time_string || null">
          </worklenz-estimated-vs-actual-chart-common>
          <worklenz-na *ngIf="!data.actual_time || !data.estimated_time"></worklenz-na>
        </td>


        <!-- progress-->
        <td *ngIf="progressActive">
          <worklenz-tasks-progress-bar
            *ngIf="(data.tasks_stat.todo || data.tasks_stat.doing || data.tasks_stat.done); else naTemplate"
            [todoProgress]="data.tasks_stat.todo"
            [doingProgress]="data.tasks_stat.doing"
            [doneProgress]="data.tasks_stat.done"
          ></worklenz-tasks-progress-bar>
        </td>

        <!-- last activity-->
        <td [ngSwitch]="!!data.last_activity" *ngIf="lastActivityActive">
          <ng-container *ngSwitchCase="true">
            <span class="ellipsis" nz-tooltip [nzTooltipTitle]="data.last_activity.last_activity_string">
              {{data.last_activity.last_activity_string}}.
            </span>
          </ng-container>
          <worklenz-na *ngSwitchCase="false"></worklenz-na>
        </td>

        <!-- Status -->
        <td *ngIf="statusActive">
          <worklenz-project-status
            [projStatuses]="projectStatuses"
            [project]="data">
          </worklenz-project-status>
        </td>

        <!-- Start/End dates -->
        <td *ngIf="startEndDateActive">
          <worklenz-project-start-end-dates
            [project]="data">
          </worklenz-project-start-end-dates>
        </td>

        <!-- Days left -->
        <td *ngIf="daysLeftActive">
          <ng-container *ngIf="data.days_left !== null; else naTemplate">
            <ng-container [ngSwitch]="data.is_overdue">
              <span *ngSwitchCase="true" style="color: #f37070;">{{ data.days_left }} 天逾期</span>
              <span *ngSwitchCase="false">
                <span *ngIf="data.is_today" style="color: #80ca79;">今天</span>
                <span *ngIf="!data.is_today" style="color: #80ca79;"> {{ data.days_left }} 天剩余</span>
              </span>
            </ng-container>
          </ng-container>
        </td>

        <!-- project health-->
        <td *ngIf="healthActive">
          <worklenz-project-health-selector
            [project]="data"
            [projHealths]="projHealths">
          </worklenz-project-health-selector>
        </td>

        <!-- Category -->
        <td *ngIf="categoryActive">
          <worklenz-project-category [teamId]="data.team_id" [project]="data"></worklenz-project-category>
        </td>

        <!-- project update-->
        <td [ngSwitch]="!!data.comment" (click)="openUpdates(data)" *ngIf="updateActive">
          <ng-container *ngSwitchCase="true">
            <span class="ellipsis" [innerHTML]="data.comment" nz-tooltip [nzTooltipTitle]="commentTooltip"></span>
          </ng-container>
          <worklenz-na *ngSwitchCase="false"></worklenz-na>

          <ng-template #commentTooltip>
            <span class="tooltip-comment" [innerHTML]="data.comment"></span>
          </ng-template>
        </td>

        <!-- Client -->
        <td *ngIf="clientActive">
          <span class="ellipsis">
            <ng-container *ngIf="data.client; else naTemplate" nz-tooltip
                          [nzTooltipTitle]="data.client">{{ data.client }}</ng-container>
          </span>
        </td>

        <!-- Team -->
        <td *ngIf="teamActive">
          <nz-tag [nzColor]="'blue'">
            {{data.team_name}}
          </nz-tag>
        </td>

        <!-- project manager-->
        <td [ngSwitch]="!!data.project_manager">
          <ng-container *ngSwitchCase="true" [nz-tooltip]="data.project_manager.name">
            <nz-avatar class="me-2" [nzSize]="28" [nzText]="data.project_manager.name | firstCharUpper"
                       [nzSrc]="data.project_manager.avatar_url"
                       [style.background-color]="data.project_manager.avatar_url ? '#ececec' : getColor(data.project_manager.name)"></nz-avatar>
            <span>{{data.project_manager.name | ellipsis: 15}}</span>
          </ng-container>
          <worklenz-na *ngSwitchCase="false"></worklenz-na>
        </td>

      </tr>
      </tbody>
    </nz-table>
  </nz-card>
</nz-content>

<worklenz-rpt-team-drawer></worklenz-rpt-team-drawer>
<worklenz-rpt-project-drawer></worklenz-rpt-project-drawer>
<worklenz-rpt-tasks-drawer></worklenz-rpt-tasks-drawer>
<worklenz-rpt-task-view-drawer></worklenz-rpt-task-view-drawer>

<worklenz-project-updates-drawer></worklenz-project-updates-drawer>

<ng-template #naTemplate>
  <worklenz-na></worklenz-na>
</ng-template>

<nz-dropdown-menu #statusDropDown="nzDropdownMenu">
  <ul class="pt-0" style="max-height: 330px; overflow-y: auto;" nz-menu>
    <li *ngFor="let item of projectStatuses" class="m-0" [(nzChecked)]="item.selected"
        (nzCheckedChange)="get()"
        nz-checkbox nz-menu-item>
      {{item.name}}
    </li>
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #healthDropDown="nzDropdownMenu">
  <ul class="pt-0" style="max-height: 330px; overflow-y: auto;" nz-menu>
    <li *ngFor="let item of projHealths" class="m-0" [(nzChecked)]="item.selected"
        (nzCheckedChange)="get()"
        nz-checkbox nz-menu-item>
      {{item.name}}
    </li>
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #categoryDropDown="nzDropdownMenu">
  <ul class="pt-0" style="max-height: 330px; overflow-y: auto;" nz-menu>
    <li class="px-3 py-2 sticky-top bg-white">
      <input [(ngModel)]="categorySearchText" (ngModelChange)="detectChanges()" type="text"
             placeholder="按类别搜索" nz-input #categorySearchInput>
    </li>
    <li *ngFor="let item of projCategories | searchByName: categorySearchInput.value" class="m-0"
        [(nzChecked)]="item.selected"
        (nzCheckedChange)="get()"
        nz-checkbox nz-menu-item>
      <nz-badge [nzColor]="item.color_code" [nzText]="item.name"></nz-badge>
    </li>
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #projectManagerDropDown="nzDropdownMenu">
  <ul class="pt-0" style="max-height: 330px; overflow-y: auto;" nz-menu>
    <li class="px-3 py-2 sticky-top bg-white">
      <input [(ngModel)]="projectManagerSearchText" (ngModelChange)="detectChanges()" type="text"
             placeholder="按名称搜索" nz-input #projectManagerSearchInput>
    </li>
    <li *ngFor="let item of projectManagers | searchByName: projectManagerSearchInput.value" class="m-0"
        [(nzChecked)]="item.selected"
        (nzCheckedChange)="get()"
        nz-checkbox nz-menu-item>
      {{item.name}}
    </li>
  </ul>
</nz-dropdown-menu>
